<template>
    <!-- 所有的内容要被根节点包含 -->
    <div id="new">


        <!-- 引入head组件 -->
        <v-head></v-head>
        <h2>这是一个new组件--{{message}}</h2>

        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>

    </div>
</template>

<script>
    import Head from "./Head.vue";
    export default {
        data() {
            return {
                message: "我是一个new组件"
            };
        },
        methods: {
            run() {
                alert(this.message);
            }
        }
        ,
        components: {
            "v-head": Head
        }
    };
</script>



<!-- 方法二 或者添加scoped ，部作用域，两者选其一。 -->
<style lang="scss" scoped>
    /* 方法一：#home指定作用域 */
    #home {
        .head {
            background: green;
        }
    }
</style>